<template>
  <li :class="itemClass" :style="itemStyle" ref="item">
    <slot>
      <div :class="leftClass">
        <i :class="[`${icon}`,`${prefixCls+'-icon'}`]" v-if="icon"></i>
        <img :src="src" alt v-if="src" />
      </div>
      <div :class="rightClass">
        <div :class="rightTitleClass">{{title}}</div>
        <div :class="rightContentClass">{{content}}</div>
      </div>
    </slot>
  </li>
</template>
<script>
const prefixCls = "vbestui-list-item";
export default {
  name: "BListItem",
  inject: {
    vbestList: {
      default: false,
    },
  },
  props: {
    icon: {
      type: String,
      default: "",
    },
    src: {
      type: String,
      default: "",
    },
    title: {
      type: String,
      default: "",
    },
    content: {
      type: String,
      default: "",
    },
    color: {
      type: String,
      default: "",
    },
    splitColor: {
      type: String,
      default: "",
    },
    backgroundColor: {
      type: String,
      default: "",
    },
    /**隔行变色背景色 */
    stripeBackgroundColor: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      prefixCls: prefixCls,
      key: null,
      isHover: false,
    };
  },
  computed: {
    itemClass() {
      return [
        `${this.prefixCls}`,
        this.isSplit ? `${this.prefixCls + "-border"}` : "",
      ];
    },
    leftClass() {
      return [`${this.prefixCls + "-left"}`];
    },
    rightClass() {
      return [`${this.prefixCls + "-right"}`];
    },
    rightTitleClass() {
      return [`${this.prefixCls + "-title"}`];
    },
    rightContentClass() {
      return [`${this.prefixCls + "-content"}`];
    },

    itemStyle() {
      return {
        background: this
          ? this.key % 2 != 0
            ? this.stripeBackgroundColor || this.vbestList.stripeBackgroundColor
            : this.backgroundColor
          : this.backgroundColor,
        color: this.color,
        borderColor: this.splitColor || this.getSplitColor,
      };
    },
    /**是否隔行变色 */
    isStripe() {
      return this.vbestList.stripe;
    },
    /**是否显示分割线 */
    isSplit() {
      return this.vbestList.split;
    },
    getSplitColor() {
      return this.vbestList.splitColor;
    },
  },
  mounted() {
    this.key = this.$vnode.key;
  },
};
</script>